<!--这是帖子详细页<  -->
<template>
    <div class="post-detail-container">
        <!-- 主要内容区 -->
        <div class="main-content">
            <!-- 文章标题和作者信息 -->
            <div class="article-header">
                <h1 class="title">{{ postsdata.title }}</h1>
                <div class="author-info">
                    <div class="author-avatar">
                        <img :src="postsdata.user_avatar" alt="作者头像">
                    </div>
                    <div class="author-details">
                        <div class="author-name">{{ userData.user_nickname }}</div>
                        <div class="post-meta">
                            <span class="publish-time">{{ postsdata.createdAt }}</span>
                            <span class="dot">·</span>
                            <span class="read-count">阅读 {{ postsdata.views }}</span>
                </div>
                    </div>
                    <el-button type="primary" size="small" class="follow-btn" @click="add">
                        <i class="el-icon-plus"></i> 关注
                    </el-button>
                </div>
            </div>

            <!-- 文章内容 -->
            <div class="article-content">
                <div class="content-text">{{ postsdata.mainboby }}</div>
                
                <!-- 图片网格布局 -->
                <div v-if="postsdata.images && postsdata.images.length" class="image-grid">
                    <img v-for="(image, index) in postsdata.images" 
                         :key="index" 
                         :src="image" 
                         @click="showImageViewer(index)"
                         :alt="`图片 ${index + 1}`">
                </div>
                
                <!-- 单张图片显示 -->
                <div v-else-if="postsdata.image" class="content-image">
                    <img :src="postsdata.image" 
                         @click="showImageViewer(0)" 
                         alt="文章配图">
                </div>
            </div>

            <!-- 图片查看器 -->
            <div v-if="showViewer" class="image-viewer-overlay" @click="closeImageViewer">
                <div class="image-viewer-content">
                    <img :src="currentViewImage" alt="大图预览">
                </div>
            </div>

            <!-- 文章操作栏 -->
            <div class="article-actions">
                <div class="action-left">
                    <el-button type="primary" class="action-btn vote-btn" @click="like">
                        <i class="el-icon-top"></i>
                        <span>赞同</span>
                        <span class="vote-count">{{ postsdata.likes || 0 }}</span>
                    </el-button>
                    <el-button type="info" class="action-btn vote-btn down" plain>
                        <i class="el-icon-bottom"></i>
                    </el-button>
        </div>
                <div class="action-right">
                    <el-button class="action-btn" @click="favorite">
                        <i class="el-icon-star-off"></i>
                        <span>收藏</span>
                        <span class="action-count">{{ postsdata.favorites || 0 }}</span>
                    </el-button>
                    <el-button class="action-btn" @click="sharePost">
            <i class="el-icon-share"></i>
                        <span>分享</span>
                    </el-button>
                    <el-button class="action-btn" @click="askAI">
                        <i class="el-icon-chat-dot-round"></i>
                        <span>AI解答</span>
                    </el-button>
                    <el-button class="action-btn" @click="reportPost">
                        <i class="el-icon-warning"></i>
                        <span>举报</span>
                    </el-button>
                    <el-button type="text" class="back-home" @click="goHome">
                        <i class="el-icon-back"></i>
                        返回首页
                    </el-button>
                </div>
            </div>

            <!-- 评分区域 -->
            <div class="rating-section">
                <div class="rating-title">文章评分</div>
                <el-rate v-model="value" show-text></el-rate>
            </div>

            <!-- 评论区 -->
            <div class="comments-section">
                <div class="comments-header">
                    <h3>{{ commentsData.length }} 条评论</h3>
                </div>
                
                <!-- 评论输入框 -->
                <div class="comment-input">
                    <el-input
                        type="textarea"
                        :rows="3"
                        placeholder="写下你的评论..."
                        v-model="text"
                        resize="none"
                    ></el-input>
                    <div class="comment-actions">
                        <el-button type="primary" @click="commentadd">发布评论</el-button>
                    </div>
                </div>

                <!-- 评论列表 -->
                <div class="comments-list">
                    <div v-for="(commentarr, index) in commentsData" :key="index" class="comment-item">
                        <div class="comment-user">
                            <img :src="commentarr.commentavatar" alt="评论者头像" class="comment-avatar">
                            <div class="comment-info">
                                <div class="comment-username">{{ commentarr.commentname }}</div>
                                <div class="comment-time">{{ commentarr.createdAt }}</div>
                            </div>
                        </div>
                        <div class="comment-content">{{ commentarr.content }}</div>
                        <div class="comment-actions">
                            <el-button type="text" size="small">
                                <i class="el-icon-thumb"></i> 赞同
                            </el-button>
                            <el-button type="text" size="small">
                                <i class="el-icon-chat-dot-round"></i> 回复
                            </el-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 侧边栏 -->
        <div class="sidebar">
            <!-- 作者信息卡片 -->
            <div class="author-card">
                <div class="author-header">
                    <img :src="postsdata.user_avatar" alt="作者头像" class="large-avatar">
                    <h3>{{ userData.user_nickname }}</h3>
                    <p class="author-bio">收集怪谈中...</p>
                </div>
                <div class="author-stats">
                    <div class="stat-item">
                        <div class="stat-value">{{ postsdata.views || 0 }}</div>
                        <div class="stat-label">阅读</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value">{{ commentsData.length || 0 }}</div>
                        <div class="stat-label">评论</div>
                    </div>
                </div>
                <el-button type="primary" class="follow-author-btn" @click="add">
                    <i class="el-icon-plus"></i> 关注作者
                </el-button>
            </div>

            <!-- 积分排行榜 -->
            <div class="sidebar-card">
                <div class="card-header">
                    <h3><i class="el-icon-trophy"></i> 积分排行榜</h3>
                    <div class="tab-group">
                        <span class="tab active">近7日</span>
                        <span class="tab">近30日</span>
                        <span class="tab">至今</span>
                    </div>
                </div>
                <div class="rank-list">
                    <div class="rank-item" v-for="(rank, index) in rankList" :key="index">
                        <span class="rank-num" :class="{'top-three': index < 3}">{{ index + 1 }}</span>
                        <img :src="rank.avatar" class="rank-avatar" :alt="rank.name">
                        <span class="rank-name">{{ rank.name }}</span>
                        <span class="rank-score">{{ rank.score }}</span>
                    </div>
                </div>
            </div>

            <!-- 相关推荐 -->
            <div class="sidebar-card">
                <div class="card-header">
                    <h3><i class="el-icon-reading"></i> 相关推荐</h3>
                </div>
                <div class="recommend-list">
                    <div class="recommend-item" v-for="(item, index) in recommendList" :key="index">
                        <div class="recommend-content">
                            <h4>{{ item.title }}</h4>
                            <div class="recommend-meta">
                                <span>{{ item.views }} 阅读</span>
                                <span>{{ item.likes }} 点赞</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 热门标签 -->
            <div class="sidebar-card">
                <div class="card-header">
                    <h3><i class="el-icon-collection-tag"></i> 热门标签</h3>
                </div>
                <div class="tag-cloud">
                    <el-tag v-for="(tag, index) in hotTags" 
                            :key="index" 
                            :type="tag.type"
                            size="small"
                            class="tag-item">
                        {{ tag.name }}
                    </el-tag>
                </div>
            </div>
        </div>

        <!-- AI 对话框 -->
        <el-dialog
            title="AI 解答"
            :visible.sync="aiDialogVisible"
            width="50%"
            :before-close="handleClose">
            <div class="ai-chat-container">
                <div class="ai-chat-messages" ref="chatMessages">
                    <div v-for="(msg, index) in chatMessages" 
                         :key="index" 
                         :class="['message', msg.role === 'user' ? 'user-message' : 'ai-message']">
                        <div class="message-content">{{ msg.content }}</div>
                    </div>
                </div>
                <div class="ai-chat-input">
                    <el-input
                        v-model="aiInputMessage"
                        type="textarea"
                        :rows="3"
                        placeholder="请输入您的问题..."
                        @keyup.enter.native="sendToAI"
                    ></el-input>
                    <el-button type="primary" @click="sendToAI" :loading="isAiLoading">
                        发送
                    </el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    props: ['id'], // 接收来自路由的参数
    data() {
        return {
            postsdata: {},
            userData: {},
            commentsData: [],
            text: '',
            form: {},
            value: '',
            showViewer: false,
            currentImageIndex: 0,
            // 新增数据
            rankList: [
                { name: 'tanqth', avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png', score: '5,275' },
                { name: '日立奔腾浪潮微软松下联想', avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png', score: '4,175' },
                { name: '秋天之落叶', avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png', score: '2,775' },
                { name: 'ooolinux', avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png', score: '2,495' },
                { name: 'daigua1987', avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png', score: '1,340' }
            ],
            recommendList: [
                { title: '如何培育美丽的花卉？新手必看攻略', views: 1234, likes: 88 },
                { title: '阳台种花的注意事项，让您的花卉茁壮成长', views: 986, likes: 76 },
                { title: '四季花卉养护指南：春夏秋冬的不同照料方式', views: 876, likes: 65 }
            ],
            hotTags: [
                { name: '花卉养护', type: '' },
                { name: '园艺技巧', type: 'success' },
                { name: '植物知识', type: 'warning' },
                { name: '花艺设计', type: 'danger' },
                { name: '绿植搭配', type: 'info' }
            ],
            aiDialogVisible: false,
            aiInputMessage: '',
            chatMessages: [],
            isAiLoading: false
        };
    },
    computed: {
        currentViewImage() {
            if (this.postsdata.images && this.postsdata.images.length) {
                return this.postsdata.images[this.currentImageIndex];
            }
            return this.postsdata.image;
        }
    },
    created() {
        this.fetchPostDetail();
    },
    methods: {
        fetchPostDetail() {
            console.log('Received ID:', this.id); // 添加日志来验证ID是否正确传递
            this.request.get(`/originalposts/${this.id}`).then(res => {
                console.log(res);
                this.getcomments();
                this.postsdata = res.data;
            })
        },
        getcomments() {
            this.request.get(`/comments/${this.id}`)
                .then(res => {
                    this.commentsData = res.data;
                })
                .catch(error => {
                    console.error("Error fetching user data:", error);
                });
        },
        formatDate(dateString) {
            const options = { year: 'numeric', month: 'long', day: 'numeric' };
            return new Date(dateString).toLocaleDateString(undefined, options);
        },
        commentadd() {
            this.request.post("/comments/postsave?postsid=" + this.postsdata.post_id + "&content=" + this.text)
                .then(res => {
                    this.getcomments();
                    this.text = '';
                    this.$notify({
                        title: res.data,
                        type: 'success'
                    });
                })
                .catch(error => {
                    console.error("Error fetching user data:", error);
                });
        },
        like() {
            this.request.post(`/likes/${this.id}`).then(res => {
                this.$notify({
                    title: res.data,
                    type: 'success'
                });
            })
                .catch(error => {
                    console.error("Error fetching user data:", error);
                });
        },
        favorite() {
            this.request.post("/favorites/save?id=" + this.id)
                .then(res => {
                    this.$notify({
                        title: res.data,
                        type: 'success'
                    });
                })
                .catch(error => {
                    console.error("Error del user data:", error);
                });
        },
        add() {
            console.log("这是加关注按钮");

        },
        showImageViewer(index) {
            this.currentImageIndex = index;
            this.showViewer = true;
            // 阻止页面滚动
            document.body.style.overflow = 'hidden';
        },
        closeImageViewer() {
            this.showViewer = false;
            // 恢复页面滚动
            document.body.style.overflow = 'auto';
        },
        goHome() {
            this.$router.push('/home');
        },
        askAI() {
            this.aiDialogVisible = true;
            // 添加初始问题
            this.chatMessages = [{
                role: 'user',
                content: this.postsdata.title + '\n' + this.postsdata.mainboby
            }];
            // 自动发送第一条消息
            this.sendToAI(true);
        },
        
        async sendToAI(isInitial = false) {
            if (!isInitial && !this.aiInputMessage.trim()) {
                this.$message.warning('请输入问题内容');
                return;
            }

            this.isAiLoading = true;
            
            try {
                // 如果不是初始消息，添加用户消息到对话列表
                if (!isInitial) {
                    this.chatMessages.push({
                        role: 'user',
                        content: this.aiInputMessage
                    });
                }

                const messages = this.chatMessages.map(msg => ({
                    role: msg.role,
                    content: msg.content
                }));

                const response = await this.request.post('/ai/chat', {
                    messages: messages
                });

                if (response.data.code === 0) {
                    if (response.data.data) {
                        this.chatMessages.push({
                            role: 'assistant',
                            content: response.data.data
                        });
                    } else {
                        this.$message.error(response.data.msg || 'AI 响应错误');
                    }
                } else {
                    this.$message.error(response.data.msg || 'AI 响应错误');
                }
            } catch (error) {
                console.error('AI 请求错误:', error);
                this.$message.error('AI 服务请求失败');
            } finally {
                this.isAiLoading = false;
                this.aiInputMessage = '';
                // 滚动到底部
                this.$nextTick(() => {
                    const chatMessages = this.$refs.chatMessages;
                    if (chatMessages) {
                        chatMessages.scrollTop = chatMessages.scrollHeight;
                    }
                });
            }
        },
        
        handleClose(done) {
            this.aiDialogVisible = false;
            this.chatMessages = [];
            this.aiInputMessage = '';
            done();
        },
        
        sharePost() {
            // 实现分享功能
            this.$message({
                message: '分享功能开发中',
                type: 'info'
            });
        },
        
        reportPost() {
            // 实现举报功能
            this.$message({
                message: '举报功能开发中',
                type: 'info'
            });
        }
    }
};
</script>

<style scoped>
.post-detail-container {
    max-width: 1200px; /* 增加最大宽度 */
    margin: 0 auto;
    padding: 24px 40px; /* 增加内边距 */
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 32px;
    background-color: #f6f6f6;
    min-height: calc(100vh - 60px); /* 减去顶部导航栏的高度 */
}

.main-content {
    background: white;
    border-radius: 12px; /* 增加圆角 */
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    padding: 32px;
    min-width: 0; /* 防止内容溢出 */
}

.article-header {
    margin-bottom: 32px;
}

.title {
    font-size: 28px;
    font-weight: 600;
    color: #121212;
    margin-bottom: 24px;
    line-height: 1.5;
    word-break: break-word;
}

.author-info {
    display: flex;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid #f6f6f6;
    margin-bottom: 20px;
}

.author-avatar img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 16px;
    border: 2px solid #f0f2f5;
}

.author-details {
    flex: 1;
}

.author-name {
    font-size: 16px;
    font-weight: 500;
    color: #121212;
    margin-bottom: 4px;
}

.post-meta {
    font-size: 14px;
    color: #8590a6;
}

.dot {
    margin: 0 8px;
}

.follow-btn {
    padding: 0 16px;
}

.article-content {
    font-size: 16px;
    line-height: 1.8;
    color: #121212;
    margin: 24px 0;
    word-break: break-word;
}

.content-text {
    margin-bottom: 24px;
    white-space: pre-wrap;
    font-size: 16px;
    line-height: 1.8;
    color: #2c3e50;
}

.content-image {
    margin: 24px -32px; /* 图片出血效果 */
    position: relative;
    overflow: hidden;
}

.content-image img {
    max-width: 100%;
    width: 100%;
    border-radius: 4px;
    transition: transform 0.3s ease;
    object-fit: cover; /* 确保图片填充 */
}

.content-image:hover img {
    transform: scale(1.02); /* 悬停时轻微放大效果 */
}

.article-actions {
    background-color: #fff;
    border-radius: 8px;
    padding: 16px 24px;
    margin: 24px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #e0e0e0;
}

.action-left {
    display: flex;
    align-items: center;
    gap: 4px;
}

.action-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.vote-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    font-size: 14px;
}

.vote-btn.down {
    padding: 0 12px;
}

.vote-count {
    margin-left: 4px;
    font-weight: 600;
}

.action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 16px;
    font-size: 14px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.action-btn:hover {
    background-color: #f0f2f5;
    transform: translateY(-1px);
}

.action-btn i {
    font-size: 16px;
}

.action-count {
    margin-left: 4px;
    color: #8590a6;
    font-size: 12px;
}

.back-home {
    color: #8590a6;
    font-size: 14px;
    padding: 0 16px;
    height: 36px;
    display: flex;
    align-items: center;
    gap: 6px;
    border-left: 1px solid #e0e0e0;
    margin-left: 12px;
}

.back-home:hover {
    color: #056de8;
    background-color: transparent;
}

/* 添加动画效果 */
@keyframes vote-animation {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.vote-btn:active {
    animation: vote-animation 0.3s ease;
}

.rating-section {
    padding: 24px 0;
    border-bottom: 1px solid #f6f6f6;
}

.rating-title {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 16px;
    color: #121212;
}

.comments-section {
    background-color: #fff;
    border-radius: 8px;
    margin-top: 24px;
}

.comments-header {
    margin-bottom: 24px;
}

.comments-header h3 {
    font-size: 16px;
    font-weight: 500;
    color: #121212;
}

.comment-input {
    background-color: #f9f9f9;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 24px;
}

.comment-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}

.comments-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.comment-item {
    padding: 20px;
    border-bottom: 1px solid #f0f2f5;
    transition: background-color 0.3s ease;
}

.comment-item:hover {
    background-color: #f9f9f9;
}

.comment-user {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.comment-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    margin-right: 12px;
}

.comment-info {
    flex: 1;
}

.comment-username {
    font-size: 15px;
    font-weight: 500;
    color: #121212;
    margin-bottom: 4px;
}

.comment-time {
    font-size: 14px;
    color: #8590a6;
}

.comment-content {
    font-size: 15px;
    line-height: 1.6;
    color: #121212;
    margin: 8px 0;
}

.sidebar {
    position: sticky;
    top: 24px;
    align-self: start;
}

.author-card {
    background: white;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(18, 18, 18, 0.1);
}

.author-header {
    text-align: center;
    margin-bottom: 24px;
}

.large-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-bottom: 16px;
}

.author-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    text-align: center;
}

.stat-value {
    font-size: 18px;
    font-weight: 600;
    color: #121212;
    margin-bottom: 4px;
}

.stat-label {
    font-size: 14px;
    color: #8590a6;
}

/* 图片网格布局 */
.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin: 24px 0;
}

.image-grid img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.image-grid img:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

/* 响应式设计优化 */
@media (max-width: 1200px) {
    .post-detail-container {
        max-width: 100%;
        padding: 16px;
        grid-template-columns: 1fr;
    }

    .sidebar {
        display: none;
    }

    .content-image {
        margin: 24px -16px;
    }

    .image-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
}

@media (max-width: 768px) {
    .post-detail-container {
        padding: 12px;
    }

    .main-content {
        padding: 20px;
    }

    .title {
        font-size: 24px;
    }

    .content-image {
        margin: 16px -20px;
    }

    .image-grid {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 12px;
    }
}

/* 图片查看器遮罩层 */
.image-viewer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.image-viewer-content {
    max-width: 90vw;
    max-height: 90vh;
}

.image-viewer-content img {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
}

/* 新增滚动条样式 */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* 侧边栏卡片通用样式 */
.sidebar-card {
    background: white;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(18, 18, 18, 0.1);
}

.card-header {
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
}

.card-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: #121212;
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
}

.card-header h3 i {
    margin-right: 8px;
    color: #056de8;
}

/* 作者卡片样式优化 */
.author-card {
    margin-bottom: 20px;
}

.author-bio {
    color: #8590a6;
    font-size: 14px;
    margin: 8px 0;
}

.follow-author-btn {
    width: 100%;
    margin-top: 16px;
}

/* 排行榜样式 */
.tab-group {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.tab {
    font-size: 14px;
    color: #8590a6;
    cursor: pointer;
    padding: 2px 0;
}

.tab.active {
    color: #056de8;
    font-weight: 500;
    border-bottom: 2px solid #056de8;
}

.rank-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rank-item {
    display: flex;
    align-items: center;
    padding: 8px 0;
}

.rank-num {
    width: 24px;
    font-size: 14px;
    font-weight: 600;
    color: #8590a6;
}

.rank-num.top-three {
    color: #ff6b6b;
}

.rank-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin: 0 8px;
}

.rank-name {
    flex: 1;
    font-size: 14px;
    color: #121212;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rank-score {
    font-size: 14px;
    color: #ff6b6b;
    font-weight: 500;
}

/* 推荐列表样式 */
.recommend-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.recommend-item {
    cursor: pointer;
    padding: 8px 0;
}

.recommend-item:hover h4 {
    color: #056de8;
}

.recommend-content h4 {
    font-size: 14px;
    color: #121212;
    margin: 0 0 8px 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.recommend-meta {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: #8590a6;
}

/* 标签云样式 */
.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag-item {
    cursor: pointer;
    transition: all 0.3s ease;
}

.tag-item:hover {
    transform: translateY(-2px);
}

/* 响应式优化 */
@media (max-width: 1200px) {
    .sidebar-card {
        display: none;
    }
    
    .author-card {
        display: block;
        margin-bottom: 20px;
    }
}

/* AI 对话框样式 */
.ai-chat-container {
    display: flex;
    flex-direction: column;
    height: 400px;
}

.ai-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 8px;
    margin-bottom: 20px;
}

.message {
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
}

.user-message {
    align-items: flex-end;
}

.ai-message {
    align-items: flex-start;
}

.message-content {
    max-width: 80%;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.5;
}

.user-message .message-content {
    background: #056de8;
    color: white;
    border-radius: 12px 12px 0 12px;
}

.ai-message .message-content {
    background: white;
    color: #333;
    border-radius: 12px 12px 12px 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.ai-chat-input {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.ai-chat-input .el-textarea {
    flex: 1;
}

.ai-chat-input .el-button {
    margin-top: 8px;
}
</style>